<template>
  <el-dialog
    v-model="props.modelValue"
    @close="closeDialog"
    :title="`笔记详情 - ${note?.book.title}`"
    width="50%"
  >
    <div v-if="note" class="note-detail">
      <div class="book-info">
        <h3>{{ note.book.title }}</h3>
      </div>
      
      <div class="user-info">
        <span>用户: {{ note.author.nickname }}</span>
        <span>提交时间: {{ formatDate(note.createTime) }}</span>
      </div>
      
      <div class="note-content">
        <h4>笔记内容:</h4>
        <p>{{ note.content }}</p>
      </div>
      
      <div class="note-status">
        <el-tag :type="statusTagType(note.status)">
          {{ statusText(note.status) }}
        </el-tag>
      </div>
    </div>
    
    <template #footer>
      <el-button @click="closeDialog">关闭</el-button>
      <el-button
        v-if="note?.status === 'pending'"
        type="success"
        @click="handleApprove"
      >
        通过
      </el-button>
      <el-button
        v-if="note?.status === 'pending'"
        type="danger"
        @click="handleReject"
      >
        拒绝
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  note: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:modelValue'])
const closeDialog = () => {
  emit('update:modelValue', false) // 通知父组件更新
}
const statusTagType = (status) => {
  return {
    '0': 'warning',
    '1': 'success',
    '2': 'danger'
  }[status] || ''
}

const statusText = (status) => {
  return {
    '0': '待审核',
    '1': '已通过',
    '2': '已拒绝'
  }[status] || status
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-')
}
</script>

<style scoped>
.note-detail {
  .book-info {
    margin-bottom: 20px;
    
    h3 {
      margin: 0 0 10px 0;
    }
  }
  
  .user-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: var(--el-text-color-secondary);
  }
  
  .note-content {
    background-color: var(--el-fill-color-light);
    padding: 15px;
    border-radius: 4px;
    
    h4 {
      margin-top: 0;
    }
    
    p {
      white-space: pre-wrap;
      line-height: 1.8;
    }
  }
  
  .note-status {
    margin-top: 20px;
    text-align: right;
  }
}
</style>